<template>
    <div class="mine-media">
        <div>
            <el-card class="mine-media-safe" shadow="hover">
                <div>注意事项：清柠陪学将采用最有效的方式保证您的信息安全
                    <img src="../../../assets/mime/提示.png" alt="">
                </div>

            </el-card>
        </div>
        <div class="mine-media-contain">
            <div class="mine-media-contain-title">
                <img src="../../../assets/mime/社交.png" alt="">
                <div>
                    <h5>社交媒体</h5>
                </div>

            </div>
            <div class="email">
                <el-card class="mine-media-contain-email" shadow="hover">
                    <div>
                        <el-button class="btn" size="small" @click="dialogFormVisible = true">修改</el-button>
                        <el-dialog center title="修改邮箱地址" :modal-append-to-body='false' :visible.sync="dialogFormVisible">
                            <el-form :model="userMeta">
                                <el-form-item label="邮箱地址" :label-width="formLabelWidth">
                                    <el-input v-model="userMeta.email" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="updateuserEmail">确 定</el-button>
                            </div>
                        </el-dialog>
                        <div class="name">邮箱地址</div>
                        <div class="text">{{userMeta.email}}</div>
                    </div>
                </el-card>
                <div class="img img1"><img src="../../../assets/mime/24gf-mailboxFull (1).png" alt=""></div>


            </div>
            <div class="phone">
                <div class="img img2"> <img src="../../../assets/mime/手机_填充.png" alt=""></div>

                <el-card class="mine-media-contain-phone clearfixed" shadow="hover">
                    <div>
                        <el-button class="btn" size="small" @click="dialogVisible = true">修改</el-button>
                        <el-dialog center title="修改个人信息" :modal-append-to-body='false' :visible.sync="dialogVisible">
                            <el-form :model="userMeta">
                                <el-form-item label="电话号码" :label-width="formLabelWidth">
                                    <el-input v-model="userMeta.phoneNumber" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="updateuserPhone">确 定</el-button>
                            </div>
                        </el-dialog>
                        <div class="name">电话号码</div>
                        <div class="text">{{userMeta.phoneNumber}}</div>
                    </div>

                </el-card>


            </div>

        </div>

    </div>
</template>

<script>
import {
    updateEmail,
    updatePhone
} from '../../../api/user';
export default {
    name: 'mineMedia',
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            dialogVisible: false,

        }
    },
    props: [
        'userMeta'
],
    components: {
    },
    created() {
    },
    mounted() {

    },
    methods: {
        updateuserEmail() {
            const data ={
                toEmail: this.userMeta.email
            }
            console.log(data);
            updateEmail(data).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            }); 
            this.dialogFormVisible = false
        },  
        updateuserPhone() {
            const phone = {
                phoneNumber: this.userMeta.phoneNumber
            }
              
            updatePhone(phone).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            });
            this.dialogVisible = false
        }
    }
}
</script>

<style scoped lang="less">
.mine-media {
    &-safe {
        background: rgba(229, 247, 190, 1);
        border-radius: 38px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(128, 128, 128, 1);
        text-align: center;
        margin-top: 2vh;

        img {
            width: 2vw;
            vertical-align: middle;
            border-radius: 28px;
        }

    }

    &-contain {
        align-items: center;
        justify-content: space-between;
        width: 80%;
        margin: 3vh auto;

        &-title {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;

            img {
                width: 2vw;
                height: 4.5vh;
            }

            div {
                width: 90%;
                border-bottom: 1px solid rgba(165, 214, 63, 1);
                ;

                h5 {
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0.45px;
                    line-height: 0px;
                    color: #089bab;
                    margin: 3vh;

                }
            }


        }
        ::v-deep .el-dialog {
            width:80vh; 
            border-radius: 20px;
        }

        button {
            flex: 1;
            background-color: rgba(213, 237, 161, 1);
            color: rgba(7, 74, 69, 1);

            &:hover {
                color: #fff;
                background-color: rgba(0, 186, 173, 1);
            }
        }
        .text {
            font-size: 12px;
        }

        .name {
            font-size: 16px;
        }

        .email {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .phone {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &-email {
            background: rgba(229, 247, 190, 1);
            border-radius: 38px;
            color: rgba(128, 128, 128, 1);
            margin-top: 2vh;
            width: 80%;
            display: flex;
            flex-direction: column;

            .btn {
                font-size: 14px;
                float: right;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                border-radius: 15px;
                background: rgba(0, 186, 173, 1);
                border: 1px solid rgba(0, 186, 173, 1);


                &:hover {
                    box-shadow: 1px 1px 5px #D5EDA1;
                    background: #D5EDA1;
                }
            }
        }




        .clearfixed::after {
            content: '';
            display: block;
            clear: both;
        }

        &-phone {
            background: rgba(229, 247, 190, 1);
            border-radius: 38px;
            color: rgba(128, 128, 128, 1);
            margin-top: 5vh;
            width: 80%;
            display: flex;
            flex-direction: column;

            .btn {
                font-size: 14px;
                float: right;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                border-radius: 15px;
                background: rgba(0, 186, 173, 1);
                border: 1px solid rgba(0, 186, 173, 1);


                &:hover {
                    box-shadow: 1px 1px 5px #D5EDA1;
                    background: #D5EDA1;
                }
            }
        }

        .img1 {
            margin-top: 2vh;
        }

        .img2 {
            margin-top: 4vh;
        }

        .img {
            width: 4vw;
            height: 4vw;
            border-radius: 20px;
            background: rgba(0, 186, 173, 1);
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 3vw;
            }
        }
    }

}
</style>
